<template>
	<div class="cate-tab1 swiper">
		<ol class="swiper-wrapper">
			<li v-for="item in list" :key="item.id" class="swiper-slide">
				<p :class="{'default': iscur===item.id}" @click="iscur=item.id">{{item.msg}}</p>
			</li>
		</ol>
		<CategoryTab3 v-if="iscur==1" :propcategorytab3="list1"></CategoryTab3>
		<CategoryTab4 v-if="iscur==2" :propcategorytab4="list2"></CategoryTab4>
		<CategoryTab5 v-if="iscur==3" :propcategorytab5="list3"></CategoryTab5>
		<CategoryTab6 v-if="iscur==4" :propcategorytab6="list4"></CategoryTab6>
		<CategoryTab7 v-if="iscur==5" :propcategorytab7="list5"></CategoryTab7>
	</div>
</template>

<script>
	// 1.引入vue周期函数
	import CategoryTab3 from './CategoryTab3.vue'
	import CategoryTab4 from './CategoryTab4.vue'
	import CategoryTab5 from './CategoryTab5.vue'
	import CategoryTab6 from './CategoryTab6.vue'
	import CategoryTab7 from './CategoryTab7.vue'
	import {
		onMounted
	} from 'vue';
	// 2.引入Swiper的动态组件
	import Swiper, {
		Autoplay,
		EffectCoverflow,
		EffectCube,
		Pagination,
	} from 'swiper';
	// 3.swiper组件应用配置
	Swiper.use([Autoplay, EffectCoverflow, EffectCube])
	export default {
		name: 'CategoryTab1',
		data() {
			return {
				list: [
					{id: 1,msg: "本周活动"},
					{id: 2,msg: "下周活动"},
					{id: 3,msg: "元旦圣诞"},
					{id: 4,msg: "古道徒步"},
					{id: 5,msg: "亲子游玩"}
				],
				list1:[],
				list2:[],
				list3:[],
				list4:[],
				list5:[],
				iscur: 1
			}
		},
		props:['propcatetab1'],
		watch:{
			propcatetab1(){
				this.list1=this.propcatetab1.tab1List
				this.list2=this.propcatetab1.tab2List
				this.list3=this.propcatetab1.tab3List
				this.list4=this.propcatetab1.tab4List
				this.list5=this.propcatetab1.tab5List
			}
		},
		created() {
			this.list2=this.propcatetab1.tab2List
			this.list3=this.propcatetab1.tab3List
			this.list4=this.propcatetab1.tab4List
			this.list5=this.propcatetab1.tab5List
		},
		components:{
			CategoryTab3,
			CategoryTab4,
			CategoryTab5,
			CategoryTab6,
			CategoryTab7
		},
		setup() {
			onMounted(() => {
				new Swiper('.cate-tab1', {
					slidesPerView: 4,
				})
			})
		}
	}
</script>

<style scoped>
	a{
			color:#000000;
			text-decoration: none;
		}
		.cate-tab1{
			height: 9.2rem;
		}
		.cate-tab1 ol{
			width: 100%;
			height: 1rem;
		}
		.cate-tab1 ol li{
			text-align: center;
			width: 20%;
			margin-top: 0.2rem;
		}
		.cate-tab1 ol li p{
			font-size: 0.4rem;
			width: 90%;
			border: 0.01rem solid gainsboro;
			border-radius: 0.6rem;
			line-height: 0.6rem;
		}
		.cate-tab1 .default{
			font-weight: bold;
			color: #e6ac00;
			box-shadow: 0 0 0 0.01rem gainsboro;
		}
</style>
